<template>
  <div class="scroll-view">
    <n-infinite-scroll
      style="height: 100%"
      :distance="10"
      @load="
        () => {
          handleLoad(false)
        }
      "
    >
      <!-- 内容 -->
      <slot></slot>

      <!-- 加载状态 -->
      <div
        class="flex flex-center fz-12 cl-basic mt-10 mb-10"
        v-if="props.status"
      >
        <!-- 加载中 -->
        <div v-if="props.status === 1">加载中...</div>

        <!-- 没有更多数据 -->
        <div v-else-if="props.status === 2">没有更多数据</div>

        <!-- 加载失败 -->
        <div v-else-if="props.status === 3">
          <span>加载失败，</span>
          <span
            class="cl-primary td-under click hover"
            @click="
              () => {
                handleLoad(true)
              }
            "
          >
            点击重试
          </span>
        </div>

        <!-- 暂无数据 -->
        <n-empty
          description="暂无数据"
          v-else-if="props.status === 4"
        ></n-empty>
      </div>
    </n-infinite-scroll>
  </div>
</template>

<script setup>
const props = defineProps(['status'])
const emit = defineEmits(['load'])

function handleLoad(isRefresh = false) {
  emit('load', isRefresh)
}
</script>

<style lang="scss" scoped></style>
